<template>
  <div class="people_con_main">
    <div class="PeopleModel" v-for="(obj,index) in list" :key="index" @click="searchFn">
        <div class="people-headImg">
            <img :src="obj.user_img" alt="">
        </div>
        <div class="people-info">
            <span class="people-name"> {{ obj.user_name }} </span>
            <span class="people-age"> {{ obj.user_age }}岁</span>
            <span class="people-sex"> </span>
        </div>
        <div class="peopleState">
          {{ state }}
        </div>
        <div class="people-btn">
          <span class="people-label01"> {{ obj.lableName }} </span>
          <!-- <span class="people-label02"></span>
          <span class="people-label03"></span> -->
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
export default {
    methods:{
        tableLoad(){
            axios({
            url:"/sign/getAllPeople",
            method:"get"
            }).then((res) =>{
             this.list = res.data
             let arr = res.data
             for(let i=0;i<arr.length;i++){
                if(arr[i].home_sign_state==1){
                    this.state = "待签约"
                }else if(arr[i].home_sign_state==2){
                    this.state = "签约中"
                }else if(arr[i].home_sign_state==3){
                    this.state = "已完成"
                }else if(arr[i].home_sign_state==4){
                    this.state = "已过期"
                }
             }
            })
        }
    },
    created(){
        this.tableLoad()
    },
    data() {
        return {
            list:[],
            state:""
        }
    },
}
</script>

<style>
    .PeopleModel{
        width: 200px;
        height: 230px;
        border-radius: 10px;
        box-shadow: 0 0 4px rgb(208, 208, 208);
        margin-bottom: 25px;
        background: white;
        transition: 0.3s;
        cursor: pointer;
        display: inline-block;
        margin-left: 20px;
    }
    /* .PeopleModel:nth-child(5n){
        position: relative;
        top: 8px;
    } */
    .PeopleModel:hover{
        box-shadow: 0 0 0px darkgray;
        background: #F2F7FB;
    }
    .people-headImg{
        width: 65px;
        height: 65px;
        border-radius: 50%;
        box-shadow: 0 8px 8px darkgray;
        margin: 20px auto;
        overflow: hidden;
    }
    .people-headImg img{
        width: 100%;
    }
    .people-info{
        width: 100%;
        height: 40px;
        margin-top: 10px;
        line-height: 40px;
        text-align: center;
    }
    .people-info span{
        display: inline-block;
    }
    .people-name{
        font-size: 18px;
    }
    .people-age{
        font-size: 13px;
        color: darkgray;
        margin-left: 5px;
    }
    .peopleState{
        text-align: center;
        font-size: 13px;
        color: #FA7B72;
        margin-top: 5px;
    }
    .people-btn{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }
    .people-label01{
      display: inline-block;
      width: 60px;
      height: 23px;
      background: #fd47477b;
      border-radius: 25px;
      color: white;
      line-height: 23px;
      text-align: center;
      font-size: 10px;
    }
    .people-label02{
      display: inline-block;
      width: 60px;
      height: 23px;
      background: darkgray;
      border-radius: 25px;
      margin-left: 5px;
      margin-right: 5px;
    }
    .people-label03{
      display: inline-block;
      width: 60px;
      height: 23px;
      background: darkgray;
      border-radius: 25px;
    }
    .peopleState{
      width: 70px;
      height: 23px;
      background: #28D094;
      border-radius: 20px;
      margin: 0 auto;
      color: white;
      line-height: 23px;
      text-align: center;
    }
    /* .people_con_main{
        display: flex;
        flex-wrap:wrap;
        justify-content: space-between;
    } */
</style>